<template>
  <div class="checkwork">
    <van-search
      v-model="searchwork"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <div class="content">
      <div class="content-top">
      <van-calendar
      title="考勤情况记录表"
        :poppable="false"
        :show-confirm="false"
        :show-title='false'
        :min-date='new Date("2021-10-1")'
        :style="{ height: '400px' }"
        @select='searchCheckWork'
      />
      </div>
      <div>
        <div class="content-center">
          <van-row type='flex'>
           <van-col>
             当前日期:{{this.currentDate}}
           </van-col>
          </van-row>
            <van-row type='flex'>
           <van-col>
             旷课:{{this.currentDate}}
           </van-col>
          </van-row>
            <van-row type='flex'>
           <van-col>
             迟到:{{this.currentDate}}
           </van-col>
          </van-row>
           <van-row type='flex'>
           <van-col>
             请假:{{this.currentDate}}
           </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchwork: "value",
      currentDate:'',
    };
  },
  methods: {
    onSearch(val) {},
    onCancel() {},
    searchCheckWork(value){
      this.currentDate=this.$moment(value).format('YYYY-MM-DD')
     console.log(this.$moment(value).format('YYYY-MM-DD') );
    }
  },
};
</script>

<style lang="scss" scoped>
.checkwork{
  .content{
    &-top{
      /deep/ .van-calendar{
      background-color: #c3ff6d;
      }
     
    }
  }
}
</style>